<template>
    <div class="add">
        <h2 class="tit">API接口管理编辑</h2>
        <div class = 'main'>
            <p class="title">基本信息</p>
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100" label-position="left" class="formcont">
                <FormItem label="公司名称：" prop="company">
                    <Input v-model="formValidate.company" placeholder="请输入公司名称" maxlength="200" style='width:85%;'></Input>
                </FormItem>
                <FormItem label="用途：" prop="remark">
                    <Input v-model="formValidate.remark" placeholder="请输入用途" maxlength="200" style='width:85%;'></Input>
                </FormItem>
                <FormItem label="访问用户名：" prop="serviceName">
                    <Input v-model="formValidate.serviceName" placeholder="请输入访问用户名" maxlength="50" style='width:85%;'></Input>
                </FormItem>
                <FormItem label="aesKey：" class="suojin">
                    <p style='color:#5362e1;'>{{ formValidate.serviceAesKey }}</p>
                    <Button @click='copyContent(formValidate.serviceAesKey)'>点击复制</Button>
                </FormItem>
                <FormItem label="token：" class="suojin">
                    <p style='color:#5362e1;'>{{ formValidate.serviceToken }}</p>
                    <Button @click='copyContent(formValidate.serviceToken)'>点击复制</Button>
                </FormItem>
                <FormItem label="是否启用：" class="suojin">
                    <iSwitch size="large" v-model='formValidate.isOpen' >
                        <span slot="open">开启</span>
                        <span slot="close">关闭</span>
                    </iSwitch>
                </FormItem>
            </Form>
        </div>
        <div class="butbox">
            <Button type="primary" @click="handleSubmit('formValidate')" :disabled = 'btuStatus' class="btn">
                <Icon type="ios-checkmark" class="icon"/>保存
            </Button>
            <Button @click="handleReset('formValidate')" style="margin-left: 8px">
                <i class = "iconfont icon-butongyi icon"></i>返回
            </Button>
        </div>
    </div>
</template>
<script>
import api from "@/api/commonApi";
export default {
    data() {
        return {
            formValidate: {
                // 公司名称
                company: "",
                // 用途
                remark: "",
                // 开关
                isOpen: true,
                // 64位生成码
                serviceAesKey: "",
                // 128位生成码
                serviceToken: "",
                // 访问用户名
                serviceName: "",
                id: ""
            },
            ruleValidate: {
                company: [{ required: true, message: '请输入公司名称', trigger: 'blur' }],
                remark: [{ required: true, message: '请输入用途', trigger: 'blur' }],
                serviceName: [{ required: true, message: '请输入访问用户名', trigger: 'blur' }],
            },
            btuStatus: false,
        };
    },
    created() {
        let breadList = [
            { path: "/index", title: "首页" },
            {
                path: "/index/configuration/admin/user/list",
                title: "帐号权限配置"
            },
            {
                path: "/index/configuration/interfaceManagement/list",
                title: "接口管理"
            }
        ];
        this.$emit("changeBreadList", breadList);
    },
    mounted() {
        let id = this.$route.query.id;
        this.getDefault(id)
    },
    methods: {
        // 确认添加接口
        handleSubmit (name) {
            this.btuStatus = true
            this.$refs[name].validate((valid) => {
                if (valid) {
                    let url = api.updateApiService;
                    let params = {}
                    params.isOpen = Number(this.formValidate.isOpen).toString()
                    params.remark = this.formValidate.remark
                    params.serviceName = this.formValidate.serviceName
                    params.company = this.formValidate.company
                    params.serviceAesKey = this.formValidate.serviceAesKey
                    params.serviceToken = this.formValidate.serviceToken
                    params.id = this.formValidate.id
                    this.$axios.post(url, params).then(res => {
                        if (res.data.success) {
                            this.$Message.success(res.data.message)
                            setTimeout(() => {
                                this.handleReset('formValidate')
                            }, 500)
                            this.btuStatus = false
                        } else {
                           this.$Message.error(rres.data.message)
                           this.btuStatus = false
                        }
                    })
                } else {
                    this.$Message.error('请完整填写必填项!');
                    this.btuStatus = false
                }
            }).catch(err => {
                this.btuStatus = false;
            });
        },
        handleReset (name) {
            this.$refs[name].resetFields();
            let query = this.$route.query;
            this.functionJS.queryNavgationTo(this, "/index/configuration/interfaceManagement/list", {
                pageNo: query.pageNo
            });
        },
        getDefault (id) {
            let url = api.findApiServiceById;
            let params = {
                id
            }
            this.$axios.post(url, params).then(res => {
                console.log(res);
                if(res.data.success) {
                    let ret = res.data.object;
                        // 公司名称
                    this.formValidate.company = ret.company
                    // 用途
                    this.formValidate.remark = ret.remark
                    // 开关
                    this.formValidate.isOpen = Boolean(Number(ret.isOpen))
                    // 64位生成码
                    this.formValidate.serviceAesKey = ret.serviceAesKey
                    // 128位生成码
                    this.formValidate.serviceToken = ret.serviceToken
                    // 访问用户名
                    this.formValidate.serviceName = ret.serviceName
                    this.formValidate.id = ret.id
                
                } else {
                    this.$Message.error("加载接口管理详情失败")
                }
            })
        },
        // 点击复制到剪粘版
        copyContent (content) {
            if(window.clipboardData){
                window.clipboardData.setData('text',content);
            }else{
                (function(content){
                    document.oncopy=function(e){
                        e.clipboardData.setData('text',content);
                        e.preventDefault();
                        document.oncopy=null;
                    }
                })(content);
                document.execCommand('Copy');
            }
            this.$Message.success("复制成功")
        },
    }
};
</script>
<style lang="less" scoped>
.add {
    width: calc(100%);
    padding: 10px 30px;
    margin: 0 auto;
    background: #fff;
    .tit {
        margin:10px 0;
        font-weight:bold;
        text-align:center;
    }
    .main{
        width: 98%;
        display: flex;
        flex-direction: column;
        margin: 10px auto;
        border: 1px solid #f0f0f0;
        box-shadow: 0 4px 3px #ebedf8;
        border-radius: 5px;
        margin-bottom: 20px;
        .title {
            font-size: 20px;
            padding-left: 15px;
            margin-bottom: 20px;
            color: #333;
            height: 40px;
            line-height: 40px;
            background: #ebedf8;         
        }
        .formcont {
            width: 70%;
            margin: 0 auto;
            .suojin {
                margin-left: 10px;
            }
        }
    }
    .butbox {
        text-align: center;
        margin: 20px auto;
        .icon {
            font-size: 14px;
            margin-right: 5px;
        }
        .btn{
            width: 75px;
            height: 35px;
        }
    }       
}
</style>
